<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
        <!-- 1. 直接使⽤元素的事件属性-->
        <h1 onclick="this.innerHTML='1. 直接使⽤元素的事件属性'">1. click Me!</h1>
        <!-- 2. 从事件处理程序中调⽤-->
        <h1 onclick="onclickH1(this)">2. click Me!</h1>
        <!-- 3. 通过属性向元素分配事件属性-->
        <button onclick="onclickButton(this)" value="click me!">3. click Me!</button>

        <!-- 4. 通过代码向元素分配事件属性-->
        <button id='btn1'>4. click Me!</button>

        <script>
            function onclickH1(id) {
                id.innerHTML = " 2. 从事件处理程序中调⽤"
            }
            function onclickButton(id) {
                    alert("3.通过属性向元素分配事件属性")
            }
            document.getElementById('btn1').onclick = function(){
                alert('4. 通过代码向元素分配事件属性')
            }
        </script>
</body>
</html>